<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改设备')"/>
    <th:block th:include="include :: select2-css"/>

    <style>

        .timeWidth {
            width: 30%;
        }
    </style>
</head>
<body>
<div class="main-content">
    <form id="form-user-add" class="form-horizontal">
        <input name="id" th:value="${equipment.id}" type="hidden">
        <input name="sim" id="sim" th:value="${equipment.sim}" type="hidden">
        <input id="workPattern" th:value="${equipment.workPattern}" type="hidden">
        <input id="timePattern" th:value="${equipment.timePattern}" type="hidden">
        <input id="startTime" th:value="${equipment.startTime}" type="hidden">
        <input id="endTime" th:value="${equipment.endTime}" type="hidden">


        <h4 class="form-header h4">设备控制</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>工作模式 </h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-12 select-table table-striped">
                                    <div class="tabs-container">
                                        <ul class="nav nav-tabs" id="work_pattern_nav">
                                            <li class="tab-1"><a data-toggle="tab"
                                                                 href="#tab-1"
                                                                 aria-expanded="true">关闭</a>
                                            </li>
                                            <li class="tab-2"><a data-toggle="tab"
                                                                 href="#tab-2"
                                                                 aria-expanded="true">手动</a>
                                            </li>
                                            <li class="tab-3"><a data-toggle="tab"
                                                                 href="#tab-3"
                                                                 aria-expanded="true">自动</a>
                                            </li>

                                        </ul>
                                        <div class="tab-content">
                                            <div id="tab-1" class="tab-pane">
                                                <div class="panel-body">
                                                    <strong>关闭</strong>
                                                </div>
                                            </div>
                                            <div id="tab-2" class="tab-pane ">
                                                <div class="panel-body">

                                                    <div class="row">
                                                        <div class="col-sm-1">
                                                            <div class="form-group">
                                                                <div class="radio check-box">
                                                                    <label>道路强化</label>
                                                                    <input type="radio"
                                                                           th:checked="${equipment.workSubPattern}=='0'"
                                                                           value="work_road"
                                                                           name="sub_work"> <i></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <div class="form-group">
                                                                <label
                                                                        class="col-sm-5 control-label">亮度：</label>
                                                                <div class="col-sm-6">
                                                                    <select id="work_road_brightness"
                                                                            class="form-control select2-multiple"
                                                                            th:switch="${equipment.brightness}">
                                                                        <option value=""
                                                                                th:selected="${equipment.brightness}==' '">

                                                                        </option>
                                                                        <option value="1"
                                                                                th:selected="${equipment.brightness}=='1'">
                                                                            1
                                                                        </option>
                                                                        <option value="2"
                                                                                th:selected="${equipment.brightness}=='2'">
                                                                            2
                                                                        </option>
                                                                        <option value="3"
                                                                                th:selected="${equipment.brightness}=='3'">
                                                                            3
                                                                        </option>
                                                                        <option value="4"
                                                                                th:selected="${equipment.brightness}=='4'">
                                                                            4
                                                                        </option>
                                                                        <option value="5"
                                                                                th:selected="${equipment.brightness}=='5'">
                                                                            5
                                                                        </option>
                                                                        <option value="6"
                                                                                th:selected="${equipment.brightness}=='6'">
                                                                            6
                                                                        </option>
                                                                        <option value="7"
                                                                                th:selected="${equipment.brightness}=='7'">
                                                                            7
                                                                        </option>
                                                                        <option value="8"
                                                                                th:selected="${equipment.brightness}=='8'">
                                                                            8
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div class="row">
                                                        <div class="col-sm-1">
                                                            <div class="form-group">
                                                                <div class="radio check-box">
                                                                    <label>主动诱导</label>
                                                                    <input type="radio"
                                                                           th:checked="${equipment.workSubPattern}=='1'"
                                                                           value="work_induce"
                                                                           name="sub_work">
                                                                    <i></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <div class="form-group">
                                                                <label
                                                                        class="col-sm-5 control-label">亮度：</label>
                                                                <div class="col-sm-6">
                                                                    <select id="work_induce_brightness"
                                                                            class="form-control select2-multiple">
                                                                        <option value=""></option>
                                                                        <option value="1"
                                                                                th:selected="${equipment.brightness}=='1'">
                                                                            1
                                                                        </option>
                                                                        <option value="2"
                                                                                th:selected="${equipment.brightness}=='2'">
                                                                            2
                                                                        </option>
                                                                        <option value="3"
                                                                                th:selected="${equipment.brightness}=='3'">
                                                                            3
                                                                        </option>
                                                                        <option value="4"
                                                                                th:selected="${equipment.brightness}=='4'">
                                                                            4
                                                                        </option>
                                                                        <option value="5"
                                                                                th:selected="${equipment.brightness}=='5'">
                                                                            5
                                                                        </option>
                                                                        <option value="6"
                                                                                th:selected="${equipment.brightness}=='6'">
                                                                            6
                                                                        </option>
                                                                        <option value="7"
                                                                                th:selected="${equipment.brightness}=='7'">

                                                                            7
                                                                        </option>
                                                                        <option value="8"
                                                                                th:selected="${equipment.brightness}=='8'">
                                                                            8
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <div class="form-group">
                                                                <label
                                                                        class="col-sm-5 control-label">频率：</label>
                                                                <div class="col-sm-6">
                                                                    <select id="work_induce_frequency"
                                                                            class="form-control select2-multiple">
                                                                        <option value=""></option>
                                                                        <option
                                                                                value="0.5"
                                                                                th:selected="${equipment.frequency}=='0.5'">
                                                                            0.5
                                                                        </option>
                                                                        <option value="1"
                                                                                th:selected="${equipment.frequency}=='1'">
                                                                            1
                                                                        </option>
                                                                        <option value="2"
                                                                                th:selected="${equipment.frequency}=='2'">
                                                                            2
                                                                        </option>

                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>


                                                    <div class="row">
                                                        <div class="col-sm-1">
                                                            <div class="form-group">
                                                                <div class="radio check-box">
                                                                    <label>防止追尾</label>
                                                                    <input type="radio"
                                                                           th:checked="${equipment.workSubPattern}=='2'"
                                                                           value="work_rearEnd"
                                                                           name="sub_work">
                                                                    <i></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <div class="form-group">
                                                                <label
                                                                        class="col-sm-5 control-label">亮度：</label>
                                                                <div class="col-sm-6">
                                                                    <select id="work_rearEnd_brightness"
                                                                            class="form-control select2-multiple">
                                                                        <option value=""
                                                                                th:selected="${equipment.brightness}==' '"></option>
                                                                        <option value="1"
                                                                                th:selected="${equipment.brightness}=='1'">
                                                                            1
                                                                        </option>
                                                                        <option value="2"
                                                                                th:selected="${equipment.brightness}=='2'">
                                                                            2
                                                                        </option>
                                                                        <option value="3"
                                                                                th:selected="${equipment.brightness}=='3'">
                                                                            3
                                                                        </option>
                                                                        <option value="4"
                                                                                th:selected="${equipment.brightness}=='4'">
                                                                            4
                                                                        </option>
                                                                        <option value="5"
                                                                                th:selected="${equipment.brightness}=='5'">
                                                                            5
                                                                        </option>
                                                                        <option value="6"
                                                                                th:selected="${equipment.brightness}=='6'">
                                                                            6
                                                                        </option>
                                                                        <option value="7"
                                                                                th:selected="${equipment.brightness}=='7'">
                                                                            7
                                                                        </option>
                                                                        <option value="8"
                                                                                th:selected="${equipment.brightness}=='8'">
                                                                            8
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <div class="form-group">
                                                                <label
                                                                        class="col-sm-5 control-label">频率：</label>
                                                                <div class="col-sm-6">
                                                                    <select id="work_rearEnd_frequency"
                                                                            class="form-control select2-multiple">
                                                                        <option value=""
                                                                                th:selected="${equipment.frequency}==''"></option>
                                                                        <option
                                                                                value="0.5"
                                                                                th:selected="${equipment.frequency}=='0.5'">
                                                                            0.5
                                                                        </option>
                                                                        <option value="1"
                                                                                th:selected="${equipment.frequency}=='1'">
                                                                            1
                                                                        </option>
                                                                        <option value="2"
                                                                                th:selected="${equipment.frequency}=='2'">
                                                                            2
                                                                        </option>

                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <div class="form-group">
                                                                <label
                                                                        class="col-sm-5 control-label">尾迹长度：</label>
                                                                <div class="col-sm-6">
                                                                    <select id="work_rearEnd_wake"
                                                                            class="form-control select2-multiple">
                                                                        <option value=""
                                                                                th:selected="${equipment.wake}==''"></option>
                                                                        <option value="2"
                                                                                th:selected="${equipment.wake}=='2'">
                                                                            2
                                                                        </option>
                                                                        <option value="3"
                                                                                th:selected="${equipment.wake}=='3'">
                                                                            3
                                                                        </option>
                                                                        <option value="4"
                                                                                th:selected="${equipment.wake}=='4'">
                                                                            4
                                                                        </option>
                                                                        <option value="5"
                                                                                th:selected="${equipment.wake}=='5'">
                                                                            5
                                                                        </option>
                                                                        <option value="6"
                                                                                th:selected="${equipment.wake}=='6'">
                                                                            6
                                                                        </option>

                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>
                                            <div id="tab-3" class="tab-pane">
                                                <div class="panel-body">
                                                    <strong>自动</strong>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>时间模式 </h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-12 select-table table-striped">
                                    <div class="tabs-container">
                                        <ul class="nav nav-tabs" id="time_pattern_nav">
                                            <li class="tab-1-1"><a data-toggle="tab" href="#tab-1-1"
                                                                   aria-expanded="true">全部无效</a>
                                            </li>
                                            <li class="tab-2-2"><a data-toggle="tab" href="#tab-2-2"
                                                                   aria-expanded="false">光敏使能</a>
                                            </li>
                                            <li class="tab-3-3"><a data-toggle="tab" href="#tab-3-3"
                                                                   aria-expanded="false">星历使能</a>
                                            </li>

                                        </ul>
                                        <div class="tab-content">
                                            <div id="tab-1-1" class="tab-pane">
                                                <div class="panel-body">
                                                    <strong>全部无效</strong>
                                                </div>
                                            </div>
                                            <div id="tab-2-2" class="tab-pane">

                                                <div class="panel-body">
                                                    <strong>光敏使能</strong>
                                                </div>

                                            </div>
                                            <div id="tab-3-3" class="tab-pane">
                                                <div class="panel-body">
                                                    <div class="form-group">
                                                        </label>
                                                        <div class="input-daterange input-group">
                                                            <input type="text"
                                                                   class="input-sm form-control"
                                                                   id="range_time"
                                                                   placeholder="开始时间到结束时间">
                                                        </div>

                                                    </div>
                                                    <div class="form-group">
                                                        <button
                                                                class="btn btn-sm  btn-outline btn-primary"
                                                                onclick="checkTime()" type="button">
                                                            <i class="fa fa-check"></i>对时
                                                        </button>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button
                class="btn btn-outline btn-lg btn-primary "
                onclick="sendCommand()" type="button">
            <i class="fa fa-check"></i>操作设备
        </button>
        <button type="button" class="btn btn-outline btn-lg btn-danger " onclick="closeItem()"><i
                class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script th:inline="javascript">

    $(function () {
        //回显tab页
        var workPattern = $("#workPattern").val();
        var timePattern = $("#timePattern").val();


        if (workPattern == "0") {

            $(".tab-1").addClass("active");
            $("#tab-1").addClass("active");
        }
        if (workPattern == "1") {

            $(".tab-2").addClass("active");
            $("#tab-2").addClass("active");
        }
        if (workPattern == "2") {

            $(".tab-3").addClass("active");
            $("#tab-3").addClass("active");
        }


        if (timePattern == "0") {

            $(".tab-1-1").addClass("active");
            $("#tab-1-1").addClass("active");
        }
        if (timePattern == "1") {

            $(".tab-2-2").addClass("active");
            $("#tab-2-2").addClass("active");
        }
        if (timePattern == "2") {

            $(".tab-3-3").addClass("active");
            $("#tab-3-3").addClass("active");
            var startTime = $("#startTime").val();
            var endTime = $("#endTime").val();

            $("#range_time").val(startTime + "到" + endTime)


        }


        //时间选择

        <!-- laydate示例 -->
        layui.use('laydate', function () {
            const laydate = layui.laydate;
            //时间范围
            laydate.render({
                elem: '#range_time',
                type: 'time',
                range: "到",
                theme: '#393D49',
                format: "HH:mm"
            });
        });

    });

    //操作设备---发送命令
    //对时按钮点击状态
    const flag = false;
    const sim = $("#sim").val();

    function sendCommand(index, layero) {
        var work_pattern = $("#work_pattern_nav").children("li.active").children("a").text();

        var time_pattern = $("#time_pattern_nav").children("li.active").children("a").text();
        if (work_pattern == "关闭") {
            var url = ctx + "control/work/close/" + sim;
            $.ajax({
                url: url,
                type: "get",
                success: function (res) {
                    if (res.code == "0") {
                        $.modal.alertSuccess(res.msg)
                    } else {
                        $.modal.alertError(res.msg)
                    }

                }
            })

        }

        if (work_pattern == "自动") {
            var url = ctx + "control/work/auto/" + sim;
            $.ajax({
                url: url,
                type: "get",
                success: function (res) {
                    if (res.code == "0") {
                        $.modal.alertSuccess(res.msg)
                    } else {
                        $.modal.alertError(res.msg)
                    }

                }
            })
        }
        if (work_pattern == "手动") {
            var sub_work_pattern = $("input[type='radio']:checked").val();
            //道路强化
            if (sub_work_pattern == "work_road") {
                var brightness = $("#work_road_brightness").val();
                if (brightness == "") {
                    $.modal.msgError("亮度不能为空!")
                    return;
                }

                if (time_pattern == "全部无效") {
                    var timePattern = 0;
                }
                if (time_pattern == "光敏使能") {
                    var timePattern = 1;
                }
                if (time_pattern == "星历使能") {
                    var timePattern = 2;
                    var time = $("#range_time").val();

                    var startTime = time.split("到")[0];
                    var endTime = time.split("到")[1];
                    if (startTime == "") {
                        $.modal.msgError("请选择起始时间")
                        return;
                    }
                    if (endTime == "") {
                        $.modal.msgError("请选择结束时间")
                        return;
                    }

                }
                var url = ctx + "control/work/manual/road";
                $.ajax({
                    url: url,
                    type: "post",
                    data: {
                        "sim": sim,
                        "brightness": brightness,
                        "timePattern": timePattern,
                        "startTime": startTime,
                        "endTime": endTime,

                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.code == "0") {
                            $.modal.alertSuccess(res.msg)
                        } else {
                            $.modal.alertError(res.msg)
                        }

                    }
                })

            }

            //主动诱导
            if (sub_work_pattern == "work_induce") {
                var brightness = $("#work_induce_brightness").val();
                var frequency = $("#work_induce_frequency").val();
                if (brightness == "") {
                    $.modal.msgError("亮度不能为空！")
                    return;

                }
                if (frequency == "") {
                    $.modal.msgError("频率不能为空！")
                    return;
                }

                if (time_pattern == "全部无效") {
                    var timePattern = 0;
                }
                if (time_pattern == "光敏使能") {
                    var timePattern = 1;
                }
                if (time_pattern == "星历使能") {

                    var timePattern = 2;
                    var time = $("#range_time").val();

                    var startTime = time.split("到")[0];
                    var endTime = time.split("到")[1];
                    if (startTime == "") {
                        $.modal.msgError("请选择起始时间")
                        return;
                    }
                    if (endTime == "") {
                        $.modal.msgError("请选择结束时间")
                        return;
                    }

                }
                var url = ctx + "control/work/manual/induce";
                $.ajax({
                    url: url,
                    type: "post",
                    data: {
                        "sim": sim,
                        "brightness": brightness,
                        "frequency": frequency,
                        "timePattern": timePattern,
                        "startTime": startTime,
                        "endTime": endTime,

                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.code == "0") {
                            $.modal.alertSuccess(res.msg)
                        } else {
                            $.modal.alertError(res.msg)
                        }

                    }
                })

            }
            //防止追尾
            if (sub_work_pattern == "work_rearEnd") {

                var brightness = $("#work_rearEnd_brightness").val();
                var frequency = $("#work_rearEnd_frequency").val();
                var wake = $("#work_rearEnd_wake").val();
                if (brightness == "") {
                    $.modal.msgError("亮度不能为空！")
                    return;
                }
                if (frequency == "") {
                    $.modal.msgError("频率不能为空！")
                    return;
                }
                if (wake == "") {
                    $.modal.msgError("尾迹长度不能为空！")
                    return;
                }

                if (time_pattern == "全部无效") {
                    var timePattern = 0;
                }
                if (time_pattern == "光敏使能") {
                    var timePattern = 1;
                }
                if (time_pattern == "星历使能") {
                    var timePattern = 2;
                    var time = $("#range_time").val();

                    var startTime = time.split("到")[0];
                    var endTime = time.split("到")[1];
                    if (startTime == "") {
                        $.modal.msgError("请选择起始时间")
                        return;
                    }
                    if (endTime == "") {
                        $.modal.msgError("请选择结束时间")
                        return;
                    }

                }
                var url = ctx + "control/work/manual/rearEnd";
                $.ajax({
                    url: url,
                    type: "post",
                    data: {
                        "sim": sim,
                        "brightness": brightness,
                        "frequency": frequency,
                        "timePattern": timePattern,
                        "startTime": startTime,
                        "endTime": endTime,
                        "wake": wake

                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.code == "0") {
                            $.modal.alertSuccess(res.msg)
                        } else {
                            $.modal.alertError(res.msg)
                        }

                    }
                })

            }


        }


    }

    //对时
    function checkTime() {
        var sim = $("#sim").val();
        var url = ctx + "control/checkTime/" + sim;
        $.ajax({
            url: url,
            type: "get",
            success: function (res) {
                if (res.code == "0") {
                    $.modal.alertSuccess(res.msg)
                } else {
                    $.modal.alertError(res.msg)
                }

            }
        })

    }


</script>
</body>
</html>